

<div id="app">
    <input type="text" value="{$row['uid']}" ref="uid" style="display: none;">
    <input type="text" value="{$row['buyid']}" ref="buyid" style="display: none;">
    <div class="normalDiv" >
            <div class="chat-con" >
                <div class="tab-chat">
                    <ul class="chosect">
                        <li :class="talkPeo==1?'on':''" @click = "toTalk({$row['buyid']},'buy')"><img src="//pic.7881.com/7881-2016/images/goods-details/sellicon.jpg" width="30" height="30">与买家聊天</li>
                        <li :class="talkPeo==2?'on':''" @click = "toTalk({$row['uid']},'sell')"><img src="//pic.7881.com/7881-2016/images/goods-details/sellicon.jpg" width="30" height="30">与卖家聊天</li>
                    </ul>
                    <!-- <div class="notice">
                        <div id="scroll_div">
                            <div id="scroll_begin"><a>交易过程中，请文明用语切勿相互谩骂，如遇问题请及时反馈给客服。如存在恶意谩骂行为，平台有权封号处理。</a><a>780g不会以任何名义让您进行私下交易，卖家也不可主动让买家进行私下交易，否则将永久封停780g账号。</a><a>请您务必“在780g平台-卖家中心-我卖出的订单”处进行发货，如有疑问，请联系客服小妹。</a><a>您在订单发货时，如需提取买家收货角色，请您务必在订单详情处点击【复制】按钮提取，谨防发错货，如买家变更收货角色请您再三核实有无特殊符号再进行发货，如有疑问，请联系客服小妹。</a></div>
                            <div id="scroll_end"><a>交易过程中，请文明用语切勿相互谩骂，如遇问题请及时反馈给客服。如存在恶意谩骂行为，平台有权封号处理。</a><a>780g不会以任何名义让您进行私下交易，卖家也不可主动让买家进行私下交易，否则将永久封停780g账号。</a><a>请您务必“在780g平台-卖家中心-我卖出的订单”处进行发货，如有疑问，请联系客服小妹。</a><a>您在订单发货时，如需提取买家收货角色，请您务必在订单详情处点击【复制】按钮提取，谨防发错货，如买家变更收货角色请您再三核实有无特殊符号再进行发货，如有疑问，请联系客服小妹。</a></div>
                        </div>
                    </div> -->
                </div>
                <div class="chat-saler">
                    <!-- <div class="chat-recod mCustomScrollbar _mCS_2 mCS_no_scrollbar"> -->
                        <!-- <div id="mCSB_2" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_inside" tabindex="0" style="max-height: none;"> -->
                            <!-- <div id="mCSB_2_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr" > -->
                                <!-- 消息存放处 -->
                                <div class="talkList"  ref = 'message-list'>
                                    <!-- <div class="platmsg"><h3><span>系统消息</span></h3><div class="platinfo"><p></p><p>&nbsp;</p><p><span style="color: rgb(0, 0, 0);">780g温馨提示：<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: rgb(112, 48, 160);"> ①请文明聊天，禁止辱骂、贬低、言语攻击等内容。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ②禁止在聊天内发送或引导对方发送任何联系方式，包含营地ID。&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ③禁止引导私下或其他平台交易。</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: rgb(255, 0, 0);">如有以上违规，将根据性质对账户采取禁言、临时冻结、永久冻结等处理方式。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 如账户被核实为恶意找回、诈骗行为的，将对账户进行永久冻结，并报警处理。</span></span></p><p><span style="color: rgb(0, 0, 0);"><span style="color: rgb(255, 0, 0);"><br></span></span></p><p>780g坚持公平开放的原则，与用户和商家达成更长久的合作共赢关系，对于信用良好并遵守平台规则的用户将给予平台最大的支持，对于损害用户和平台利益的个人和商家也将严厉打击。</p><p></p></div></div> -->
                                    <div :class="item.type==1?'myself':'other'" v-for="item in msgList" :key=item.id>
                                        <h3>
                                            <em>{{formatDate(item.time/1000,'yyyy-MM-dd hh:mm:ss')}}</em>
                                            <span>{{item.type==1?'我':'对方'}}</span>
                                        </h3>
                                        <p v-if="item.msgType=='msg'">{{item.text}}</p>
                                        <p v-else id="imgMsg">
                                            <el-image
                                                style="width: 100px; height: 100px"
                                                :src="item.text"
                                                :preview-src-list="Array(item.text)">
                                            </el-image>
                                        </p>
                                        <em v-if='item.type==1&&item.zt==2' class="hasread">已读</em>
                                        <em v-if="item.type==1&&item.zt==1" class="hasread">未读</em>
                                    </div>
                                </div>
                            <!-- </div> -->
                        <!-- </div> -->
                    <!-- </div> -->
                    <div class="chat-input blacklist-state">
                    <div class="toolct">
                            <!-- <a href="javascript:void(0)" class="emojitu" id="emojitu"><i class="el-icon-picture-outline" ></i></a>
                            <a href="javascript:live800Dialog();" class="police">立即举报</a> -->
                        <el-upload
                            class="upload"
                            ref="upload"
                            :action="huanjing()?'https://ceshi.780g.com/api/Ossupload/upload':'https://www.780g.com/api/Ossupload/upload'"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            :on-success="handleAvatarSuccess"
                            multiple
                            :limit="1"
                            :on-exceed="handleExceed"
                            :file-list="fileList">
                            <div>
                                <a href="javascript:void(0)" class="emojitu" id="emojitu"><i class="el-icon-picture-outline" ></i></a>
                                <span>选择图片</span>
                            </div>
                        </el-upload>
                        <span class="enter-btn pointer sellMsg" @click="sellImg()">发送图片</span>
                    </div>
                    <div class="textarea"  v-if="!endorder">
                        <div class="iptcon" contenteditable="true" id="chatWin" data-placeholder="在此输入聊天信息" ref = 'message'></div>
                    </div>
                    <div class="tosend" v-if="!endorder">
                        <a href="javascript:void(0)" class="enter-btn" @click="sellMessage()">发送</a>
                    </div>
<!--                            <div class="chat-fbden"><h4>您被禁言了<a href="javascript:void(0)" class="blue">申请解禁></a></h4><h4 class="orange">解禁审核中</h4></div>-->
                        <div class="toolct end" v-if="endorder">
                            订单已结束
                        </div>
                    </div>
                </div>
            </div>
            <div class="chat-right" v-show="orderingList.length">
                <div class="alsogz">
                    <a  target="_blank"><img src="https://pic.7881.com/7881-2016/images/chattool/wzryzh.jpg" width="220" height="70"></a>
                </div>
                <div class="order-info" >
                    <h3>订单详情{{orderingList.length}}</h3>
                    <div class="goodinfo mCustomScrollbar _mCS_5">
                        <div id="mCSB_5" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_inside" tabindex="0" style="max-height: none;">
                            <div id="mCSB_5_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr">
                                <p id="mainNoP" class="ordno">
                                    <span>单号：</span>
                                    <em class="copy-area" title="121101816345504952910814" ref="order_sn">{{orderShowInfo.order_sn}}</em>
                                    <a href="javascript:void(0)" class="copy-btn" @click="copy">[复制]</a>
                                </p>
                                <p id="orderCreateTimeP">
                                    <span>创建时间：</span>
                                    <!-- <em>{{formatDate(orderShowInfo.ontime)}}</em> -->
                                </p>
                                <p id="goodsTitleP">
                                    <span>商品标题：</span>
                                    <em>{{orderShowInfo.title}}</em>
                                </p>
                                <p id="gameInfoP">
                                    <span>游戏区服：</span>
                                    <em>{{orderShowInfo.game}}/{{orderShowInfo.area}}/{{orderShowInfo.server}}</em>
                                </p>
                                <p id="goodsTypeP">
                                    <span>物品类型：</span>
                                    <em>游戏币</em></p>
                                    <p id="totalAmountP">
                                        <span>订单金额：</span>
                                        <em><i>{{orderShowInfo.price}}</i>元</em>
                                    </p>
                                </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="input-info"></div> -->
                <div class="order-log" style="opacity:0">
                    <h3>发货流水</h3>
                    <ul class="mCustomScrollbar _mCS_4 _mCS_3" style="overflow:auto">
                        <!-- <el-timeline >
                            <el-timeline-item
                            v-for="(activity, index) in activities"
                            :key="index"
                            :timestamp="activity.timestamp">
                            {{activity.content}}
                            </el-timeline-item>
                        </el-timeline> -->
                    </ul>
                </div>
                <div class="order-btn" >
                    <p class="buyer_opt_area" v-show="orderShowInfo.status==2&&choseType==2" @click="toorderflow(orderShowInfo.id,'3')">我已完成发货</p>
                    <p class="seller_opt_area" v-show="orderShowInfo.status==2&&choseType==2"  @click="toorderflow(orderShowInfo.id,'7')">申请取消</p>
                    <p class="buyer_opt_area" v-show="choseType==1&endorder==false" @click="setorderOk(orderShowInfo.id)">确认收货</p>
                    <p class="seller_opt_area" v-show="choseType==1&endorder==false" > <a href="http://wpa.qq.com/msgrd?v=3&uin=3004726745&site=qq&menu=yes" target="_blank"> 未收到货？</a> </p>
                </div>
            </div>
        </div>
</div>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.ronghub.com/RongIMLib-4.4.7.prod.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script >
    var app = new Vue({
        el: '#app',
        data: {
            show:true,
            fileList: [],
            imageUrl:'',
            orderingList: [
                {
                    "id": 96,
                    "uid": 3,
                    "buyid": 1,
                    "account": "13462336257",
                    "order_sn": "202111505333800978",
                    "goods_id": 93,
                    "image": "/uploads/20211109/8432a84993cbbee18e06ff4970e8c9e8.jpg",
                    "game_id": 1,
                    "game": "王者荣耀",
                    "plat_id": 26,
                    "plat": "安卓系统",
                    "area_id": 28,
                    "area": "QQ",
                    "server_id": 13,
                    "server": null,
                    "type": "32",
                    "goods_type": 32,
                    "type_name": "账号",
                    "deposit": 1,
                    "buy_type": 1,
                    "title": "邱胜",
                    "price": "12.00",
                    "num": 1,
                    "amount": "12.00",
                    "mobile": "13462336257",
                    "qq": "1725726792",
                    "role": "",
                    "role_server": "",
                    "ontime": 1636429853,
                    "paytime": 1636463907,
                    "overtime": null,
                    "status": 2,
                    "reason": null,
                    "complaint": 1,
                    "payway": "支付宝",
                    "invite": "",
                    "xyg": null,
                    "token": {
                        "code": 200,
                        "userId": "3",
                        "token": "058ZF8gB8075c6gGtribOmtjpYfhg9eG@i128.cn.rongnav.com;i128.cn.rongcfg.com"
                    }
                }],
            copyText:'',
            message:'',
            im:"",
            reverse: true,
            orderingList:[],
            orderShowInfo:{},
            activities: [{
            content: '活动按期开始',
            timestamp: '2018-04-15'
            }],
            sendtoken:'',
            msgList:[],
            talkIndex:1,
            choseType:1,
            endorder:false,
            loading:false,
            uid:'',
            buyid:'',
            talkPeo:1,
        },
        watch: {
        // 监听发送消息之后自动滚动底部
        msgList(value) {
            //页面渲染完成后执行
            this.$nextTick(() => {
                this.toBottom();
            });
        },
    },
    mounted(){
        this.uid = this.$refs.uid.value
        this.buyid = this.$refs.buyid.value
        const im = RongIMLib.init({ appkey: this.huanjing()?"8luwapkv8689l":'8brlm7uf8o8c3'})
        this.im = im
        let _this = this
        im.connect({ token: JSON.parse(localStorage.getItem('lastlogin')).admintoken }).then(user => {
            this.sendtoken = this.buyid
            console.log(this.sendtoken);
            console.log('链接成功, 链接用户 id 为什么呢: ', user.id);
            document.addEventListener("visibilitychange", function() {
                        console.log(document.visibilityState);
                        if(document.visibilityState == "hidden") {
                            console.log('隐藏');
                            _this.show= false
                        } else if (document.visibilityState == "visible") {
                            console.log('显示')
                            _this.show= true
                            console.log(_this.show);
                            var conversation = _this.im.Conversation.get({
                                targetId: _this.sendtoken,
                                type: RongIMLib.CONVERSATION_TYPE.PRIVATE
                                });
                                var messageUId = '1301-NBJQ-MK31-3417';  // 消息唯一 Id, message 中的 messageUid
                                var lastMessageSendTime = 1550719033312;  // 最后一条消息的发送时间
                                var type = 1;  // 备用，默认赋值 1 即可
                                // 以上 3 个属性在会话的最后一条消息中可以获得
                                conversation.send({
                                messageType: 'RC:ReadNtf',
                                content: {
                                    messageUId: messageUId,
                                    lastMessageSendTime: lastMessageSendTime,
                                    type: type
                                }
                                }).then(function(message){
                                console.log('发送已读通知消息成功', message);
                            });
                        }
                    });
            var conversation = this.im.Conversation.get({
                targetId: this.sendtoken,
                type: RongIMLib.CONVERSATION_TYPE.PRIVATE
                });
                var option = {
                timestamp: +new Date(),
                count: 20
                };
                conversation.getMessages(option).then(function(result){
                var list = result.list; // 历史消息列表
                var hasMore = result.hasMore; // 是否还有历史消息可以获取
                    console.log('获取历史消息成功', list, hasMore);
                    var conversation = _this.im.Conversation.get({
                        targetId: _this.sendtoken,
                        type: RongIMLib.CONVERSATION_TYPE.PRIVATE
                        });
                        var messageUId = '1301-NBJQ-MK31-3417';  // 消息唯一 Id, message 中的 messageUid
                        var lastMessageSendTime = 1550719033312;  // 最后一条消息的发送时间
                        var type = 1;  // 备用，默认赋值 1 即可
                        // 以上 3 个属性在会话的最后一条消息中可以获得
                        conversation.send({
                        messageType: 'RC:ReadNtf',
                        content: {
                            messageUId: messageUId,
                            lastMessageSendTime: lastMessageSendTime,
                            type: type
                        }
                        }).then(function(message){
                        console.log('发送已读通知消息成功', message);
                    });


                    let talkbefore  = [];
                    let lastTime = 0
                    if(localStorage.getItem('msgTime')){
                        let msgTime = JSON.parse(localStorage.getItem('msgTime'))
                       for (var key in msgTime) {
                            if (key==_this.sendtoken) {
                                lastTime = msgTime[key]
                            }
                        }
                    }
                    list.forEach(e => {
                        console.log(lastTime,e.sentTime);
                        if(e.messageType=='RC:TxtMsg'){
                            var talk ={
                                type:e.messageDirection==1?'1':'2',
                                time:e.sentTime,
                                msgType:'msg',
                                text:e.content.text,
                                zt:lastTime<e.sentTime?1:2
                            }
                            talkbefore.push(talk)
                        }else if(e.messageType=='RC:ImgMsg'){
                            var talk ={
                                type:e.messageDirection==1?'1':'2',
                                time:e.sentTime,
                                msgType:'img',
                                text:e.content.imageUri,
                                zt:lastTime<e.sentTime?1:2
                            }
                            talkbefore.push(talk)
                        }

                    });
                    console.log(talkbefore);
                    _this.msgList=talkbefore;

                });
        }).catch(error => {
            console.log('链接失败了: ', error.code, error.msg);
        });

        // }).catch(function (error) {
        //         console.log(error);
        // });


        // 添加事件监听
        im.watch({
            // 监听会话列表变更事件
            conversation (event) {
                // 假定存在 getExistedConversationList 方法，以获取当前已存在的会话列表数据1
                // const conversationList = getExistedConversationList()
                // 发生变更的会话列表
                const updatedConversationList = event.updatedConversationList;
                // 通过 im.Conversation.merge 计算最新的会话列表
                // const latestConversationList = im.Conversation.merge({ conversationList, updatedConversationList })
                // console.log(updatedConversationList);
            },
            message (event) {
                // 新接收到的消息内容
                const message = event.message;
                console.log(message);




                let msgTime = localStorage.getItem('msgTime')?JSON.parse(localStorage.getItem('msgTime')):{}
                console.log(msgTime);
                msgTime[message.targetId] = message.sentTime
                localStorage.setItem('msgTime',JSON.stringify(msgTime))
                if(message.senderUserId==_this.sendtoken){
                    if(message.messageType=='RC:ReadNtf'){
                        console.log('已读');
                        console.log(_this.msgList);
                        let msgList = _this.msgList
                        msgList.forEach(element => {
                            if(element.time<message.sentTime){
                                element.zt=2
                            }
                        });
                        console.log(msgList);
                    }else if(_this.show){
                        var conversation = im.Conversation.get({
                            targetId: message.senderUserId,
                            type: RongIMLib.CONVERSATION_TYPE.PRIVATE
                            });
                            var messageUId = '1301-NBJQ-MK31-3417';  // 消息唯一 Id, message 中的 messageUid
                            var lastMessageSendTime = 1550719033312;  // 最后一条消息的发送时间
                            var type = 1;  // 备用，默认赋值 1 即可
                            // 以上 3 个属性在会话的最后一条消息中可以获得
                            conversation.send({
                            messageType: 'RC:ReadNtf',
                            content: {
                                messageUId: messageUId,
                                lastMessageSendTime: lastMessageSendTime,
                                type: type
                            }
                            }).then(function(message){
                            console.log('发送已读通知消息成功', message);
                        });
                    }


                    if(message.messageType=='RC:TxtMsg'){
                        var talk ={
                            type:2,
                            time:message.sentTime,
                            msgType:'msg',
                            text:message.content.text
                        }
                        _this.msgList.push(talk)
                    }else if(message.messageType=='RC:ImgMsg'){
                        var talk ={
                            type:2,
                            time:message.sentTime,
                            msgType:'img',
                            text:message.content.imageUri
                        }
                        _this.msgList.push(talk)
                    }
                }

            },
            // 监听 IM 连接状态变化
            status (event) {
                console.log('connection status:', event.status);
            },
            // 监听聊天室 KV 数据变更
            chatroom (event) {
                /**
                 * 聊天室 KV 存储数据更新
                 * @example
                 * [
                 *  {
                 *    "key": "name",
                 *    "value": "我是小融融",
                 *    "timestamp": 1597591258338,
                 *    "chatroomId": "z002",
                 *    "type": 1 // 1: 更新（ 含:修改和新增 ）、2: 删除
                 *  },
                 * ]
                 */
                const updatedEntries = event.updatedEntries
                console.log(updatedEntries);
            },
            expansion (event) {
                /**
                 * 更新的消息拓展数据
                 * @example {
                 *    expansion: { key: 'value' },      // 设置或更新的扩展值
                 *    messageUId: 'URIT-URIT-ODMF-DURR' // 设置或更新扩展的消息 uid
                 * }
                 */
                const updatedExpansion = event.updatedExpansion;
                /**
                 * 删除的消息拓展数据
                 * @example {
                 *    deletedKeys: ['key1', 'key2'],    // 设置或更新的扩展值
                 *    messageUId: 'URIT-URIT-ODMF-DURR' // 设置或更新扩展的消息 uid
                 * }
                 */
                const deletedExpansion = event.deletedExpansion;
                console.log(updatedExpansion);
                console.log(deletedExpansion);
            }
        });
    },
    methods:{
        sellImg(){
                console.log(this.fileList);
                if(this.imageUrl){
                    let _this = this
                    var conversation = this.im.Conversation.get({
                    targetId: this.sendtoken,
                    type: RongIMLib.CONVERSATION_TYPE.PRIVATE
                    });
                    conversation.send({
                    messageType: RongIMLib.MESSAGE_TYPE.IMAGE, // 'RC:ImgMsg'
                    content: {
                        content: '/9j/4AAQSBAAD/2wBDDBAYEBAQEB....', // // 压缩后的 base64 略缩图, 用来快速展示图片
                        imageUri: this.imageUrl // 上传到服务器的 url. 用来展示高清图片
                    }
                    }).then(function(message){
                        console.log('发送图片消息成功', message);
                        _this.imageUrl=''
                        _this.$refs.upload.clearFiles();
                        var sendMsg ={
                            type:'1',
                            time:message.sentTime,
                            msgType:'img',
                            text:message.content.imageUri,
                            zt:1,
                        }
                        _this.msgList.push(sendMsg)
                        // _this.bcMessage(message)
                    });
                }else{
                    this.$message({
                        message: '请先选择图片',
                        type: 'warning'
                    });
                }

            },
        handleAvatarSuccess(res, file,fileList) {
                console.log(fileList);
                var image = ''
                fileList.forEach((item)=>{
                    if(item.response){
                        image+=item.response.data.fullurl+','
                    }else{
                        image+=item.fullurl+','
                    }
                })
                this.imageUrl =  image.substring(0, image.lastIndexOf(','));
                console.log(this.imageUrl);
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
            },
        huanjing(){
                return window.location.href.indexOf('ceshi')!=-1||window.location.href.indexOf('8080')!=-1
            },
        //时间戳转换
        formatDate(time, fmt) {
            time = time * 1000
            let date = new Date(time)
            if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
            }
            let o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'h+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
            }
            for (let k in o) {
            if (new RegExp(`(${k})`).test(fmt)) {
                let str = o[k] + ''
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str))
            }
            }
            return fmt
        },
        padLeftZero(str) {
            return ('00' + str).substr(str.length)
        },
        //获取历史消息
        getbeforemsg(e){
            let _this = this
            console.log(e+'');
            var conversation = this.im.Conversation.get({
                targetId: e+'',
                type: RongIMLib.CONVERSATION_TYPE.PRIVATE
                });
                var option = {
                timestamp: +new Date(),
                count: 20
                };
                conversation.getMessages(option).then(function(result){
                var list = result.list; // 历史消息列表
                var hasMore = result.hasMore; // 是否还有历史消息可以获取
                    console.log('获取历史消息成功', list, hasMore);
                    var conversation = _this.im.Conversation.get({
                        targetId: _this.sendtoken,
                        type: RongIMLib.CONVERSATION_TYPE.PRIVATE
                        });
                        var messageUId = '1301-NBJQ-MK31-3417';  // 消息唯一 Id, message 中的 messageUid
                        var lastMessageSendTime = 1550719033312;  // 最后一条消息的发送时间
                        var type = 1;  // 备用，默认赋值 1 即可
                        // 以上 3 个属性在会话的最后一条消息中可以获得
                        conversation.send({
                        messageType: 'RC:ReadNtf',
                        content: {
                            messageUId: messageUId,
                            lastMessageSendTime: lastMessageSendTime,
                            type: type
                        }
                        }).then(function(message){
                        console.log('发送已读通知消息成功', message);
                    });





                    // return
                    let talkbefore  = [];
                    let lastTime = 0
                    if(localStorage.getItem('msgTime')){
                        let msgTime = JSON.parse(localStorage.getItem('msgTime'))
                       for (var key in msgTime) {
                            if (key==_this.sendtoken) {
                                lastTime = msgTime[key]
                            }
                        }
                    }
                    list.forEach(e => {
                        // console.log(lastTime,e.sentTime);
                        if(e.messageType=='RC:TxtMsg'){
                            var talk ={
                                type:e.messageDirection==1?'1':'2',
                                time:e.sentTime,
                                msgType:'msg',
                                text:e.content.text,
                                zt:lastTime<e.sentTime?1:2
                            }
                            talkbefore.push(talk)
                        }else if(e.messageType=='RC:ImgMsg'){
                            var talk ={
                                type:e.messageDirection==1?'1':'2',
                                time:e.sentTime,
                                msgType:'img',
                                text:e.content.imageUri,
                                zt:lastTime<e.sentTime?1:2
                            }
                            talkbefore.push(talk)
                        }

                    });
                    console.log(talkbefore);
                    _this.msgList=talkbefore;

                });
        },
        // 切换聊天人
        toTalk(e,f){
            if(f=='buy'){
                this.talkPeo = 1
            }else{
                this.talkPeo = 2
            }
            console.log(e);
            this.sendtoken = e+''
            this.getbeforemsg(e)
        },
        //聊天消息新增自动滚动展示底部
        toBottom() {
            const listContainer = this.$refs["message-list"];
            listContainer.scrollTop = listContainer.scrollHeight;
        },
        // 点击发送
        sellMessage(){
                if(this.$refs.message.innerText.length){
                    let _this = this
                    let text = this.$refs.message.innerText
                    this.$refs.message.innerText = ''
                    var conversation = this.im.Conversation.get({
                    targetId: this.sendtoken,
                    type: RongIMLib.CONVERSATION_TYPE.PRIVATE
                    });
                    conversation.send({
                    messageType: RongIMLib.MESSAGE_TYPE.TEXT, // 'RC:TxtMsg'
                    content: { // 填写开发者定义的消息内容
                        text: text ,
                    },
                    }).then(function(message){
                        console.log('发送文字消息成功', message);
                        var sendMsg ={
                            type:'1',
                            time:message.sentTime,
                            msgType:'msg',
                            text:message.content.text,
                            zt:1,
                        }
                        _this.msgList.push(sendMsg)
                    });
                }else{

                }
           },
        copy() {
        },
    }
})
  </script>

<style>
.el-upload__input {
    display: none!important;
}
.toolct .upload{
    display: flex;
}
.toolct .el-upload-list__item:first-child{
    margin-top: 0;
}
</style>
<style lang="scss" scoped>
.enter-btn {
    float: right;
    width: 68px;
    height: 26px;
    border: 1px solid #ff6700;
    text-align: center;
    line-height: 26px;
    border-radius: 3px;
    margin-right: 20px;
    background: #ff6700;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}
.chat-con .chat-input .toolct {
    padding: 10px 0;
    overflow: hidden;
    position: relative;
}
.sellMsg{
    position: absolute;
    left: 450px;
    top: 8px;
}
.chat-con .chat-input .toolct a {
    margin-left: 15px;
    float: left;
    display: block;
    width: 18px;
    height: 18px;
    text-align: center;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
    .talkList{
        height: 300px;
        overflow: auto;
        margin-top:20px
    }
    .end{
        text-align: center;
        font-size: 20px;
        line-height: 88px;
    }
    button, input, select, textarea {
        font-size: 100%;
        outline: none;
    }
    li{
        list-style: none;
    }
    dl {

        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }
    dt {
        display: block;
    }
    dd {
        display: block;
        margin-inline-start: 40px;
    }
    h3 {
        display: block;
        font-size: 1.17em;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
    }

    h2 {
        display: block;
        font-size: 1.5em;
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
    }
    h4 {
        display: block;
        margin-block-start: 1.33em;
        margin-block-end: 1.33em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
    }
    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }
    input {
        text-rendering: auto;
        color: -internal-light-dark(black, white);
        letter-spacing: normal;
        word-spacing: normal;
        line-height: normal;
        text-transform: none;
        text-indent: 0px;
        text-shadow: none;
        display: inline-block;
        text-align: start;
        appearance: auto;
        -webkit-rtl-ordering: logical;
        cursor: text;
        background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
        margin: 0em;
        padding: 1px 2px;
        border-width: 2px;
        border-style: inset;
        border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
        border-image: initial;
    }
    body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, li, form, fieldset, legend, button, input, textarea, th, td {
        margin: 0;
        padding: 0;
    }
    .havecon,.normalDiv{
        height: 100%;
    }
    /* //左侧内容 */
     .chat-center{
        width: 242px;
        height: 100%;
        float: left;
        box-sizing: content-box;
    }
     .chat-center .search-ord {
        height: 45px;
        border-bottom: 1px solid #eeeeee;
        padding-top: 17px;
        background: #fff;
        box-sizing: content-box;
    }
    .chat-center .search-ord .ser-ipt {
        width: 210px;
        height: 34px;
        background: #f1f1f1;
        margin: 0 auto;
    }
    .chat-center .search-ord .ser-ipt input {
        margin: 8px 0 0 8px;
        border: none;
        width: 170px;
        padding-right: 5px;
        background: no-repeat;
    }
    .chat-center .search-ord .ser-ipt a {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url("../../assets/img/orderhandling/sechicon.png") no-repeat;
        vertical-align: middle;
    }
    a:link, a:visited {
        text-decoration: none;
        outline: none;
    }

    a {
        color: #666;
    }
    a:-webkit-any-link {
        color: -webkit-link;
        cursor: pointer;
        text-decoration: underline;
    }

    /* //聊天列表 */
    .chat-center .storelist {
        height: calc(100% - 100px);
        position: relative;
        overflow: auto;
        box-sizing: content-box;
    }
    .chat-center .storelist .store {
        height: 100%;
        overflow: auto;
        position: relative;
        box-sizing: content-box;
    }

    .mCustomScrollbar {
        -ms-touch-action: pinch-zoom;
        touch-action: pinch-zoom;
    }
    .mCustomScrollBox {
        position: relative;
        overflow-y: auto;
        height: 100%;
        max-width: 100%;
        outline: 0;
        direction: ltr;
    }
    .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
        margin-right: 0;
    }
    .mCSB_container {
        overflow: hidden;
        width: auto;
        height: auto;
    }
    .chat-center .storelist .store dl {
        border-bottom: 1px solid #e1e1e1;
        padding: 14px 15px;
        cursor: pointer;
        background: #f1f1f1;
        height: 46px;
    }
     .chat-center .storelist .store dl dt {
        width: 46px;
        height: 46px;
        border-radius: 46px;
        float: left;
        position: relative;
    }
     .chat-center .storelist .store dl dt img {
        border-radius: 46px;
    }
     .chat-center .storelist .store dl dt .line-state {
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .chat-center .storelist .store dl dd {
        padding-left: 60px;
        position: relative;
        padding-top: 5px;
    }
     .chat-center .storelist .store dl dd h3 {
        font-size: 14px;
        color: #333;
        font-weight: bold;
        line-height: 20px;
    }
    .chat-center .storelist .store dl dd p {
        color: #999;
        width: 132px;
        height: 18px;
        line-height: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .chat-center .storelist .store dl dd h3 span {
        color: #999;
        font-size: 12px;
        float: right;
        font-weight: normal;
    }
     .chat-center .storelist .store:after {
        content: '';
        position: absolute;
        width: 1px;
        right: 0;
        top: 0;
        height: 100%;
        background: #eee;
    }

     .chat-center .warntip {
        border-top: 1px solid #eee;
        border-right: 1px solid #eee;
    }
    .chat-center .warntip p {
        text-align: center;
        line-height: 36px;
    }
    .chat-center .warntip p span {
        color: #ff6700;
    }
    /* //聊天区域 */

    .chat-con{
        min-width: 450px;
        float: left;
        height: 100%;
        background: #fff;
        border-right: 1px solid #eee;
        width: 100%;
    }
    .before-head {
        overflow: hidden;
        height: 62px;
        border-bottom: 1px solid #eeeeee;
        padding-left: 20px;
    }
    .before-head dl {
        padding-top: 11px;
    }
    .before-head dl dt {
        width: 40px;
        height: 40px;
        border-radius: 40px;
        float: left;
        position: relative;
    }
    .before-head dl dt img {
        border-radius: 40px;
    }
    .before-head dl dt .line-state {
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .before-head dl dd {
        padding-left: 50px;
        font-size: 16px;
        font-family: "microsoft yahei";
        line-height: 40px;
    }

    /* .chat-saler {
        position: relative;
        height: calc(100% - 63px);
    } */
    /* //头部通知 */
    .before-tips {
        background: #fbf8dc;
        padding: 5px 0;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1000;
        border-bottom: 1px solid #f4eeb2;
    }
    .before-tips.on p {
        padding: 0 75px 0 25px;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .before-tips p {
        padding: 0 75px 0 25px;
        white-space: normal;
    }
    .before-tips a {
        position: absolute;
        right: 25px;
        top: 6px;
        color: #ff6700;
    }
    /* //聊天区域 */
    .chat-saler {
        padding: 30px 0 10px 20px;
        height: calc(100% - 184px);
        overflow: auto;
    }

    .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action {
        -ms-touch-action: auto;
        touch-action: auto;
    }
    .mCustomScrollBox {
        position: relative;
        overflow: hidden;
        height: 100%;
        max-width: 100%;
        outline: 0;
        direction: ltr;
    }
    .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
        margin-right: 0;
    }

    .mCSB_container {
        overflow: hidden;
        width: auto;
        height: auto;
    }



    /* //内容输入 */

    .chat-input {
        border-top: 1px solid #eee;
        height: 140px;
        position: relative;
    }
    .chat-input .toolct {
        padding: 10px 0;
        overflow: hidden;
    }
    .chat-input .toolct a {
        margin-left: 15px;
        float: left;
        display: block;
        width: 18px;
        height: 18px;
        text-align: center;
        font-size: 14px;
        color: #333;
        cursor: pointer;
    }


    .chat-input .toolct a.police {
        font-size: 12px;
        width: 70px;
        font-family: "microsoft yahei";
        color: #ff6700;
    }



    .chat-input .textarea {
        padding: 0 15px;
        width: calc(100% - 30px);
        height: 60px;
        border: none;
        overflow: hidden;
    }
    .chat-input .textarea .iptcon {
        outline-color: #fff;
        width: 100%;
        padding: 1px;
        resize: none;
        line-height: 22px;
        height: 60px;
        overflow: auto;
        background: #fff;
    }

    .chat-input .textarea .iptcon:empty:before {
        content: attr(data-placeholder);
        color: #bbb;
    }
    .chat-input .tosend {
        overflow: hidden;
    }
    .chat-input .tosend a {
        display: inline-block;
        float: right;
        width: 68px;
        height: 26px;
        border: 1px solid #ff6700;
        text-align: center;
        line-height: 26px;
        border-radius: 3px;
        margin-right: 20px;
        background: #ff6700;
        color: #fff;
        font-size: 13px;
    }
    /* //右侧区域 */

    .chat-right {
        width: 257px;
        float: right;
        height: 100%;
    }
    .chat-right .alsogz {
        height: 70px;
        width: 220px;
        margin: 20px auto;
    }
    .chat-right .aj-load {
        height: calc(100% - 160px);
    }
    .chat-right .goods-look {
        height: 338px;
        margin-bottom: 20px;
        border-bottom: 1px solid #e6e6e6;
    }
    .chat-right .goods-look .tit {
        position: relative;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
        padding-left: 20px;
    }
    .chat-right .goods-look .tit::before {
        position: absolute;
        content: '';
        height: 16px;
        width: 4px;
        background: #39f;
        top: 4px;
        left: 0;
    }
    .chat-right .goods-look .goods-info {
        padding: 10px 15px 12px 20px;
    }
    .chat-right .goods-look .goods-info p {
        font-size: 12px;
        overflow: hidden;
        color: #666;
        line-height: 18px;
        padding: 5px 0;
    }
    .chat-right .goods-look .goods-info p span {
        display: inline-block;
        width: 60px;
        float: left;
    }
    .chat-right .goods-look .goods-info p a {
        color: #39f;
        margin-left: 4px;
    }
    .chat-right .goods-look .goods-info p em.titem {
        float: left;
        width: 157px;
        max-height: 54px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .chat-right .goods-look .goods-info p em.titem a {
        color: #666;
    }
    .chat-right .goods-look .goods-info p a {
        color: #39f;
        margin-left: 4px;
    }
    a:link, a:visited {
        text-decoration: none;
        outline: none;
    }
    .chat-right .goods-look .goods-info h4 {
        text-align: center;
        margin-top: 15px;
    }
    .chat-right .goods-look .goods-info h4 a {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        background: #ff6700;
        color: #fff;
        padding: 0 25px;
        border-radius: 4px;
    }
    a:link, a:visited {
        text-decoration: none;
        outline: none;
    }
    /* //最近浏览 */
    .chat-right .last-look {
        height: calc(100% - 358px);
    }
    .chat-right .last-look .tit {
        position: relative;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
        padding-left: 20px;
    }
    .chat-right .last-look .tit::before {
        position: absolute;
        content: '';
        height: 16px;
        width: 4px;
        background: #39f;
        top: 4px;
        left: 0;
    }
    .chat-right .last-look .looklist {
        text-align: center;
        margin-top: 10px;
        height: calc(100% - 50px);
        overflow: auto;
    }
    .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action {
        -ms-touch-action: auto;
        touch-action: auto;
    }

    .mCustomScrollbar {
        -ms-touch-action: pinch-zoom;
        touch-action: pinch-zoom;
    }
    .mCustomScrollBox {
        position: relative;
        overflow: hidden;
        height: 100%;
        max-width: 100%;
        outline: 0;
        direction: ltr;
    }
    .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
        margin-right: 0;
    }
    .mCSB_container {
        overflow: hidden;
        width: auto;
        height: auto;
    }
    .chat-right .last-look .looklist dl {
        text-align: left;
        display: inline-block;
        *display: inline;
        *zoom: 1;
        width: 240px;
        padding: 10px;
        background: #fff;
        border-radius: 4px;
        box-sizing: border-box;
        box-shadow: 0 0 3px 1px rgb(0 0 0 / 8%);
        margin-bottom: 10px;
    }
    .chat-right .last-look .looklist dl dt {
        font-family: "microsoft yahei";
        line-height: 18px;
        max-height: 54px;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        color: #333;
    }
    .chat-right .last-look .looklist dl dt a:link, a:visited {
        text-decoration: none;
        outline: none;
    }
     .chat-right .last-look .looklist dl dt a {
        color: #666;
    }
    .chat-right .last-look .looklist dl dd {
        margin-top: 5px;
    }
    .chat-right .last-look .looklist dl dd h3 {
        color: #999;
        overflow: hidden;
    }
    .chat-right .last-look .looklist dl dd p {
        margin-top: 8px;
    }
    .chat-right .last-look .looklist dl dd p span {
        color: #ff6700;
        font-family: "microsoft yahei";
        font-size: 14px;
    }
    .chat-right .last-look .looklist dl dd p a {
        float: right;
        background: #F4F4F4;
        border: 1px solid #dedede;
        font-size: 12px;
        font-family: "microsoft yahei";
        color: #333;
        padding: 1px 8px 3px 8px;
        border-radius: 3px;
        margin-left: 8px;
    }
    /* // 消息存放
    //我的 */
    .myself {
        overflow: hidden;
        margin-bottom: 10px;
        margin-right: 20px;
    }
    .myself h3 {
        text-align: right;
        font-size: 12px;
        line-height: 34px;
    }
    .myself h3 em {
        color: #aaa;
        font-family: arial;
    }
    .myself h3 span {
        color: #1778bc;
        margin-left: 15px;
    }
    .myself p {
        background: #3399ff;
        font-size: 14px;
        color: #fff;
        word-break: break-all;
        line-height: 20px;
        padding: 10px 15px;
        font-family: "microsoft yahei";
        max-width: 80%;
        display: inline-block;
        border-radius: 2px;
        float: right;
    }
    .myself .hasread {
        float: right;
        color: #999;
        margin-right: 15px;
        display: inline-block;
        vertical-align: top;
        line-height: 34px;
    }
    /* //对方 */
    .other {
        margin-bottom: 10px;
        overflow: hidden;
    }
    .other h3 {
        text-align: left;
        font-size: 12px;
        line-height: 34px;
    }
    .other h3 span {
        color: #1778bc;
        margin-right: 15px;
    }
    .other h3 em {
        color: #aaa;
        font-family: arial;
    }
    .other p {
        max-width: 80%;
        position: relative;
    }

    .other p {
        background: #eee;
        font-size: 14px;
        color: #333;
        word-break: break-all;
        line-height: 20px;
        padding: 10px 15px;
        font-family: "microsoft yahei";
        max-width: 80%;
        display: inline-block;
        border-radius: 2px;
    }
    /* //系统 */
    .platmsg {
        margin-bottom: 10px;
        overflow: hidden;
    }

    .platmsg h3 {
        text-align: left;
        font-size: 12px;
        line-height: 34px;
    }
    .platmsg h3 span {
        color: #ff6700;
        margin-right: 15px;
    }

    .platmsg .platinfo {
        background: #eee;
        font-size: 14px;
        color: #333;
        line-height: 20px;
        padding: 10px 15px;
        font-family: "microsoft yahei";
        max-width: 80%;
        display: inline-block;
        border-radius: 2px;
    }
    .platmsg .platinfo p {
        word-break: break-all;
    }
    .platmsg .platinfo p span {
        background: none !important;
    }

    .chat-center .ordlist {
        height: calc(100% - 70px);
        position: relative;
    }
    .chat-center .ordlist ul {
        height: 100%;
        overflow: auto;
        position: relative;
    }
    .chat-center .ordlist ul li.on {
        background: #fbd2b7;
        position: relative;
    }
    .chat-center .ordlist ul li {
        border-bottom: 1px solid #e1e1e1;
        padding: 14px 15px;
        cursor: pointer;

        background: #f1f1f1;
    }
    .chat-center .ordlist ul li h3 {
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #666;
        position: relative;
    }
    .chat-center .ordlist ul li h4 {
        font-size: 13px;
        color: #333;
        font-family: "microsoft yahei";
        line-height: 18px;
        max-height: 36px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin: 3px 0;
    }
    .chat-center .ordlist ul li.on p {
        color: #333;
        font-size: 12px;
    }
    .chat-center .ordlist ul li p {
        color: #999;
        font-size: 12px;
    }
    .tab-chat {
        height: 45px;
        border-bottom: 1px solid #eeeeee;
        position: relative;
    }
    .tab-chat ul.chosect {
        float: left;
        width: 362px;
        display: flex;
    }
    .tab-chat ul.chosect li.on {
        border-bottom: 1px solid #fff;
        background: #fff;
        color: #39f;
        font-weight: bold;
    }
    .tab-chat ul.chosect li {
        float: left;
        border: 1px solid #eee;
        width: 178px;
        height: 44px;
        line-height: 44px;
        background: #f6f6f6;
        font-size: 14px;
        font-family: "microsoft yahei";
        color: #666;
        margin-left: -1px;
        cursor: pointer;
    }
    .tab-chat ul.chosect li img {
        float: left;
        margin: 7px 12px 0 25px;
        width: 30px;
        height: 30px;
        border-radius: 30px;
    }
    .shopwater{
        /* // width: 230px;
        // padding:0 20px  ; */
        padding:0 20px;
        margin-top: 15px;
        overflow: auto;
        height: 200px;
    }
    .chat-right .order-info {
        padding: 0 15px 12px 15px;
        height: 30%;
        border-bottom: 1px solid #e6e6e6;
        margin-bottom: 12px;
    }
    .chat-right .order-info h3 {
        font-size: 14px;
        font-weight: bold;
        color: #333;
        font-family: "microsoft yahei";
        position: relative;
        padding-bottom: 5px;
    }
    .chat-right .order-info h3:before {
        content: '';
        position: absolute;
        width: 4px;
        height: 14px;
        background: #39f;
        left: -15px;
        top: 4px;
    }
    .chat-right .order-info .goodinfo {
        height: calc(100% - 30px);
    }
    .mCustomScrollBox {
        position: relative;
        overflow: hidden;
        height: 100%;
        max-width: 100%;
        outline: 0;
        direction: ltr;
    }
    .chat-right .order-info p.ordno {
        width: 230px;
    }
    .chat-right .order-info p {
        font-size: 12px;
        overflow: hidden;
        color: #666;
        line-height: 18px;
        padding: 3px 0;
    }
    .chat-right .order-info p.ordno span {
        width: 36px;
    }
    .chat-right .order-info p em {
        float: left;
        width: 135px;
        max-height: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .chat-right .order-info p a {
        display: inline-block;
        color: #39f;
        margin-left: 5px;
    }
    .chat-right .order-info p span {
        display: inline-block;
        width: 60px;
        float: left;
    }
    .chat-right .order-info p em i {
        color: #ff6700;
    }
    .chat-right .input-info {
        padding: 0 15px 20px 15px;
        border-bottom: 1px solid #e6e6e6;
        height: 25%;
        margin-bottom: 10px;
    }
    .chat-right .order-log {
        height: 17%;
        padding-left: 20px;
    }
    .chat-right .order-log h3 {
        font-size: 14px;
        font-weight: bold;
        color: #333;
        font-family: "microsoft yahei";
        position: relative;
        padding: 5px 20px 5px 0px;
    }
    .chat-right .order-log h3:before {
        content: '';
        position: absolute;
        width: 4px;
        height: 14px;
        background: #39f;
        left: -20px;
        top: 9px;
    }
    .chat-right .order-log ul {
        padding: 2px 5px 5px 0px;
        height: calc(100% - 40px);
    }
    .mCustomScrollBox {
        position: relative;
        overflow: hidden;
        height: 100%;
        max-width: 100%;
        outline: 0;
        direction: ltr;
    }
    .order-btn{
        margin-top: 5px;
        display: flex;
        justify-content: center;
    }
    .buyer_opt_area{
        width: 100px;
        height: 30px;
        border: 1px solid #ff6700;
        color: #fff;
        background: #ff6700;
        border-radius: 3px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
    }
    .seller_opt_area{
        width: 60px;
        height: 30px;
        border: 1px solid #666;
        color: #666;
        border-radius: 1px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
    }
    </style>
